import React, { useEffect, useMemo, useState } from "react";
import axios from "axios";
import { Table, Button, Space, message, Modal, Input, DatePicker } from "antd";
import type { ColumnsType } from "antd/es/table";
import { ListItemState } from "../../store/list/listReducer";
import { useAppSelector } from "../../store";
import { useDispatch } from "react-redux";
import { setList, fetchList, deleteList } from "../../store/list/listAction";
const { RangePicker } = DatePicker;
const Index = () => {
  const dispatch = useDispatch();
  const list = useAppSelector((state) => state.list.list);
  const [dates, setDates] = useState<number[]>([])
  const [type, setType] = useState("全部");
  const [value, setValue] = useState("");
  const types = ["全部", "衣服", "鞋子", "首饰", "数码", "蔬菜"];

  const columns: ColumnsType<ListItemState> = [
    {
      title: "id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "电话",
      dataIndex: "tel",
      key: "tel",
    },
    {
      title: "日期",
      dataIndex: "createDate",
      key: "createDate",
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: (
        <Button type="primary" danger onClick={() => deleteSelectedList()}>
          删除所选
        </Button>
      ),
      dataIndex: "id",
      key: "id",
      render(text, record, index) {
        return (
          <div>
            <Button>编辑</Button>
            <Button type="primary" danger onClick={() => handleDelete(text)}>
              删除
            </Button>
          </div>
        );
      },
    },
  ];
  const [ids, setIds] = useState<React.Key[]>([""]);
  // 请求数据

  // 删除数据
  const handleDelete = async (id: string) => {
    Modal.confirm({
      title: "确认要删除吗?",
      onOk() {
        dispatch(deleteList(id) as any).then((result) => {
          dispatch(fetchList(type, value, dates) as any);
        });
      },
      onCancel() {},
      okText: "确认",
      cancelText: "取消",
    });
  };

  // 删除所选数据
  const deleteSelectedList = async () => {
    Modal.confirm({
      title: "确认要删除所选吗?",
      async onOk() {
        const resp = await axios.post("/api/list/delete/checked", { ids });
        message.success("删除成功");
        dispatch(fetchList(type, value,dates ) as any);
      },
      onCancel() {},
      okText: "确认",
      cancelText: "取消",
    });
  };

  useEffect(() => {
    dispatch(fetchList(type, value, dates) as any);
  }, [type, value, dates]);

  return (
    <div>
      {/* 类型 */}
      <Space>
        {types.map((v, i) => {
          return (
            <Button
              key={i}
              type={v === type ? "primary" : "default"}
              onClick={() => setType(v)}
            >
              {v}
            </Button>
          );
        })}
      </Space>
      <Input value={value} onChange={(e) => setValue(e.target.value)}></Input>
      <RangePicker
        onChange={(dates) => {
          if(dates) {
            setDates([dates[0]!.valueOf(), dates[1]!.valueOf()])
          }
        }}
      ></RangePicker>
      <Table
        rowSelection={{
          type: "checkbox",
          onChange(selectedRowKeys: React.Key[]) {
            setIds(selectedRowKeys);
          },
        }}
        columns={columns}
        dataSource={list}
        rowKey={(record) => record.id}
      ></Table>
    </div>
  );
};

export default Index;
